<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>替换页面元素</title>
</head>

<body>
    <div id="Odiv">
        <p id="p1">我是第一行内容</p>
        <p id="p2">我是第二行内容</p>
        <p id="p3">我是第三行内容</p>
        <p id="p4">我是第四行内容</p>
        <input type="button" value="将第二行内容替换为JavaScript课程" onclick="replaceNode()" />
    </div>

    <script type="text/javascript">
        function replaceNode() {
            var parNode = document.getElementById("Odiv");
            var secondP = document.getElementById("p2");
            var newDiv = document.createElement("div");
            var newText = document.createTextNode("JavaScript课程");
            newDiv.appendChild(newText);
            parNode.replaceChild(newDiv, secondP);
        }
    </script>
</body>

</html>